<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

import { NFlex } from "naive-ui";
import { NButton } from "naive-ui";

import { useNewsStore } from "@/store/news";

const router = useRouter();
const newsStore = useNewsStore();

const newsId = computed((): string => {
  return router.currentRoute.value.params.newsId as string;
});
const newsTitle = computed((): string => {
  return router.currentRoute.value.params.newsTitle as string;
});

const detailInfo = ref({
  title: "",
  content: "",
});

const getNewsDetail = async (newId: string): Promise<void> => {
  const newsContent = await newsStore.fetchContent(newId);
  detailInfo.value.title = newsTitle.value;
  detailInfo.value.content = newsContent;
};

onMounted(async () => {
  await getNewsDetail(newsId.value);
});

watch(newsId, async (newId) => {
  await getNewsDetail(newId);
});

const goBack = (): void => {
  router.back();
};
</script>

<template>
  <n-flex justify="center" class="w-full h-full">
    <n-flex justify="end" class="w-full">
      <n-button @click="goBack"> 返回 </n-button>
    </n-flex>
    <n-flex justify="center" class="w-1/2">
      <span class="text-xl">{{ detailInfo.title }}</span>
    </n-flex>
    <n-flex justify="center" class="w-full">
      <p>{{ detailInfo.content }}</p>
    </n-flex>
  </n-flex>
</template>

<style scoped></style>
